<template>
	<view class="login">
		<view class="headtop">
			<view class="title">
				<image :src="zfb_image" class="logo"></image>
				<view class="name">
					欢迎登录{{zfb_name}}
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="denglu">
				<button open-type="getAuthorize" scope="userInfo" @click="getOpenUserInfo">
					支付宝一键登录
				</button>
			</view>
			<view class="quxiao" @click="fanhui">取消登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				zfb_name: '',
				zfb_image: '',
				zfb_desc: '',
				openid: '',
				avatar: '',
				nickName: '',
				hidden: false,
			}
		},
		onLoad() {

			//获取基本配置信息
			this.request({
				url: '/xcx/webconfig',
				data: {}
			}).then(res => {
				if (res.data.code == 200) {
					this.zfb_name = res.data.data.zfb_name;
					this.zfb_image = res.data.data.zfb_image;
					this.zfb_desc = res.data.data.zfb_desc;
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})

			// 获取code
			this.getAuthCode();
		},
		methods: {
			getAuthCode() {
				let that = this;
				
				my.getAuthCode({
					scopes: 'auth_base',
					success: ({
						authCode
					}) => {
						that.request({
							url: '/alipay/getUserInfo',
							data: {
								auth_code: authCode
							},
							method: "POST"
						}).then(res => {
							this.openid = res.data.data.user_id;
						})
					},
				});
			},
			getOpenUserInfo() {
				let that = this;
				
				my.getOpenUserInfo({
					success: (res) => {
						let userInfo = JSON.parse(res.response).response;
						if(userInfo.avatar){
							that.avatar = userInfo.avatar;
						}else{
							that.avatar = '';
						}
						that.nickName = userInfo.nickName;
						
						this.request({
							url: '/alipay/alipaylogin',
							data: {
								avatarUrl: that.avatar,
								nickName: that.nickName,
								openid: that.openid,
							},
							method: "POST"
						}).then(res1 => {
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							})
							uni.setStorageSync('user_id', res1.data.data)
							setTimeout(function() {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}, 2000)
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '请开启同意授权获取用户信息',
							icon: 'none'
						})
					}
				});
			},
			topage(url) {
				uni.navigateTo({
					url
				})
			},
			//返回
			fanhui() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		margin: 0 auto;
		height: 100vh;
	
		.headtop {
			width: 100%;
			margin: 0 auto;
	
			.title {
				width: 100%;
				margin: 0 auto;
				text-align: center;
	
				.logo {
					width: 160rpx;
					height: 160rpx;
					margin-top: 200rpx;
				}
	
				.name {
					font-size: 44rpx;
					color: #333333;
					font-weight: 700;
				}
			}
		}
	
		.footer {
			position: fixed;
			bottom: 200rpx;
			left: 0;
			width: 100%;
			text-align: center;
	
			.denglu {
				width: 80%;
				margin: 0 auto 30rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #00D6C0;
				color: #ffffff;
				font-size: 32rpx;
				border-radius: 44rpx;
	
				button {
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					border-radius: 44rpx;
					background: #00D6C0;
					color: #ffffff;
					font-size: 32rpx;
				}
			}
	
			.quxiao {
				width: 80%;
				margin: 0 auto 30rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #EEEFF1;
				color: #9D9D9D;
				font-size: 32rpx;
				border-radius: 44rpx;
			}
		}
	}
</style>